
import "../assets/css/detail.css";
import { useLocation, useNavigate } from "react-router-dom";
import { cartadd, getgoodsinfo } from "../request/api";
import { Toast } from "antd-mobile";
import { useEffect, useState } from "react";
export default function Detail() {
  const { state } = useLocation();
  const navigate = useNavigate();
  const [list, setlist] = useState([]);

  useEffect(() => {
    getgoodsinfo({ id: state.id }).then((res) => {
      if (res.code === 200) {
        setlist(res.list); 
        console.log(res);
      }
    });
  
  },[]);

  function gocart() {
    //   判断是否登录，是否有会话存储，有就请求添加到购物车，没有就未登录请登录
    if (sessionStorage.getItem("isLogin")) {
      // 请求添加购物车接口，等于200提示接口的msg
      // console.log(JSON.parse(sessionStorage.getItem("isLogin")).uid);
      // console.log(state.type);
      // console.log(state.id);
      cartadd({
        uid: JSON.parse(sessionStorage.getItem("isLogin")).uid,
        type: state.type,
        goodsid: state.id,
        num:1
      }).then((res) => {
        //    console.log(res);
        if (res.code === 200) {
          Toast.show({
            content: res.msg,
          });
          console.log(res);
          navigate("/index/cart");
        }
      });
    } else {
      Toast.show({
        content: "未登录！请先登录",
      });
      navigate("/login");
    }
  }
  // 立即购买
  function goorder() {
    // console.log(list);
    // console.log(state.item);
    if (sessionStorage.getItem("isLogin")) {
   
      let arr=[]
      arr.push(state.item)
    
      sessionStorage.setItem('arr',JSON.stringify(state.item?arr:list))
      navigate(`/order`);
    }else{
      Toast.show({
        content: "未登录！请先登录",
      });
      navigate("/login");
    }
  }
  console.log(state.item,'11111111');
  return (
    
    <div id="detail">
  {state.type===2?(<div>
    {
    <div key={state.item.id}>
        <header>
        <div className="box_top">
          <span className="iconfont icon-zuojiantou"></span>
          <p>{state.item.goodsname}</p>
          <div className="gd">
            <span className="iconfont icon-gengduo"></span>
            <div></div>
            <span className="iconfont icon-xiaoyuandian"></span>
          </div>
        </div>
        <div className="menu">
          <a href="#">
            <span>商品</span>
          </a>
          <a href="#">
            <span>评价</span>
          </a>
          <a href="#">
            <span>详情</span>
          </a>
          <a href="#">
            <span>推荐</span>
          </a>
        </div>
      </header>

     
          <article >
            <div className="banner1">
              <div>
                <img src={state.item.img} alt="" />
                {/* <div><span className="iconfont icon-fenxiang"></span></div>
                    <div><i>8/8</i></div> */}
              </div>
            </div>
            <div className="title1">
              <span>￥</span>
              <span>{state.item.price}</span>
              <strike>
                <i className="iconfont icon-jiage1">{state.item.market_price}</i>
              </strike>
              <span className="text">
                <a href="#">
                  <span className="iconfont icon-xingxing"></span>
                  <span>收藏</span>
                </a>
              </span>
            </div>
            <h2>{state.item.goodsname}</h2>
            <p>敏感肌可用，控油祛痘、男女可用、泡沫绵密、净透毛孔</p>
            {/* <div className="text2">{item.description}</div> */}
            <div className="text3">
              此商品于2020-11-11,00点结束闪购特卖<a href="#">查看</a>
            </div>

            <div className="main">
              <div>
                <h3>领券</h3>
              </div>
              <div className="right">
                <a href="#">
                  <div>
                    <span>300</span>
                  </div>
                </a>
                <a href="#">
                  <div>
                    <span>50</span>
                  </div>
                </a>
                <a href="#">
                  <div>
                    <span>10</span>
                  </div>
                </a>
              </div>
            </div>
            <b className="main2">
              <h3>分期</h3>
              <div className="right2">
                <span>可选3/6/12期</span>
                <span>&nbsp;&nbsp;</span>
              </div>
            </b>

            <footer>
              <ul>
                <li>
                  <a href="#" className="a">
                    <span className="iconfont icon-kefu"></span>
                    <span>客服</span>
                  </a>
                </li>
                <li>
                  <a href="#" className="a">
                    <span className="iconfont icon-dianpu"></span>
                    <span>店铺</span>
                  </a>
                </li>
                <li>
                  <a href="#" className="a">
                    <span className="iconfont icon-gouwuche1"></span>
                    <span>购物车</span>
                  </a>
                </li>
                <li>
                  <span className="b d" onClick={gocart.bind(this)}>
                    加入购物车
                  </span>
                </li>
                <li>
                  <span className="b c" onClick={goorder.bind(this)}>
                    立即购买
                  </span>
                </li>
              </ul>
            </footer>
          </article>
    </div>
    }
  </div>):(<div>
    {list.map(item => {
        return (
    <div key={item.id}>
        <header>
        <div className="box_top">
          <span className="iconfont icon-zuojiantou"></span>
          <p>{item.goodsname}</p>
          <div className="gd">
            <span className="iconfont icon-gengduo"></span>
            <div></div>
            <span className="iconfont icon-xiaoyuandian"></span>
          </div>
        </div>
        <div className="menu">
          <a href="#">
            <span>商品</span>
          </a>
          <a href="#">
            <span>评价</span>
          </a>
          <a href="#">
            <span>详情</span>
          </a>
          <a href="#">
            <span>推荐</span>
          </a>
        </div>
      </header>

     
          <article >
            <div className="banner1">
              <div>
                <img src={item.img} alt="" />
                {/* <div><span className="iconfont icon-fenxiang"></span></div>
                    <div><i>8/8</i></div> */}
              </div>
            </div>
            <div className="title1">
              <span>￥</span>
              <span>{item.price}</span>
              <strike>
                <i className="iconfont icon-jiage1">{item.market_price}</i>
              </strike>
              <span className="text">
                <a href="#">
                  <span className="iconfont icon-xingxing"></span>
                  <span>收藏</span>
                </a>
              </span>
            </div>
            <h2>{item.goodsname}</h2>
            <p>敏感肌可用，控油祛痘、男女可用、泡沫绵密、净透毛孔</p>
            <div className="text2">{item.description}</div>
            <div className="text3">
              此商品于2020-11-11,00点结束闪购特卖<a href="#">查看</a>
            </div>

            <div className="main">
              <div>
                <h3>领券</h3>
              </div>
              <div className="right">
                <a href="#">
                  <div>
                    <span>300</span>
                  </div>
                </a>
                <a href="#">
                  <div>
                    <span>50</span>
                  </div>
                </a>
                <a href="#">
                  <div>
                    <span>10</span>
                  </div>
                </a>
              </div>
            </div>
            <b className="main2">
              <h3>分期</h3>
              <div className="right2">
                <span>可选3/6/12期</span>
                <span>&nbsp;&nbsp;</span>
              </div>
            </b>

            <footer>
              <ul>
                <li>
                  <a href="#" className="a">
                    <span className="iconfont icon-kefu"></span>
                    <span>客服</span>
                  </a>
                </li>
                <li>
                  <a href="#" className="a">
                    <span className="iconfont icon-dianpu"></span>
                    <span>店铺</span>
                  </a>
                </li>
                <li>
                  <a href="#" className="a">
                    <span className="iconfont icon-gouwuche1"></span>
                    <span>购物车</span>
                  </a>
                </li>
                <li>
                  <span className="b d" onClick={gocart.bind(this)}>
                    加入购物车
                  </span>
                </li>
                <li>
                  <span className="b c" onClick={goorder.bind(this)}>
                    立即购买
                  </span>
                </li>
              </ul>
            </footer>
          </article>
    </div>
        );
      })}
  </div>)}
   
     {/* <div>{JSON.stringify(state)}</div> */}
    </div>
  );
}
